<template>
  <div class="p-2">
    <div class="p-2 bg-white">
      <List
        :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }"
        :data-source="data"
        :pagination="paginationProp"
      >
        <template #header>
          <div class="flex justify-end space-x-2">
            <slot name="header"></slot>
            <Tooltip>
              <template #title>
                <div class="w-50">每行显示数量</div>
                <Slider
                  id="slider"
                  v-bind="sliderProp"
                  v-model:value="grid"
                  @change="sliderChange"
                />
              </template>
              <Button><TableOutlined /></Button>
            </Tooltip>
            <Tooltip @click="fetch">
              <template #title>刷新</template>
              <Button><RedoOutlined /></Button>
            </Tooltip>
          </div>
        </template>
        <template #renderItem="{ item }">
          <ListItem>
            <slot name="content" :record="item"></slot>
          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import { RedoOutlined, TableOutlined } from '@ant-design/icons-vue';
  import { List, Tooltip, Slider } from 'ant-design-vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Button } from '/@/components/Button';
  import { isFunction } from '/@/utils/is';
  const ListItem = List.Item;

  import { useSlider, grid } from './data';
  // 获取slider属性
  const sliderProp = computed(() => useSlider(4));
  // 组件接收参数
  const props = defineProps({
    // 请求API的参数
    params: propTypes.object.def({}),
    //api
    api: propTypes.func,
  });
  //暴露内部方法
  const emit = defineEmits(['getMethod', 'delete']);
  //数据
  const data = ref([]);
  // 切换每行个数
  // cover图片自适应高度
  //修改pageSize并重新请求数据

  // const height = computed(() => {
  //   return `h-${120 - grid.value * 6}`;
  // });
  function sliderChange(n) {
    pageSize.value = n * 4;
    fetch();
  }

  // 自动请求并暴露内部方法
  onMounted(() => {
    fetch();
    emit('getMethod', fetch);
  });

  async function fetch(p = {}) {
    const { api, params } = props;
    if (api && isFunction(api)) {
      const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p });
      data.value = res.records;
      total.value = res.total;
    }
  }
  //分页相关
  const page = ref(1);
  const pageSize = ref(36);
  const total = ref(0);
  const paginationProp = ref({
    showSizeChanger: false,
    showQuickJumper: true,
    pageSize,
    current: page,
    total,
    showTotal: (total) => `总 ${total} 条`,
    onChange: pageChange,
    onShowSizeChange: pageSizeChange,
  });

  function pageChange(p, pz) {
    page.value = p;
    pageSize.value = pz;
    fetch();
  }
  function pageSizeChange(_current, size) {
    pageSize.value = size;
    fetch();
  }
</script>

<style lang="less" scoped>
  .lemon-card-add {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .lemon-card-add-top {
    width: 80px;
    height: 80px;
    position: relative;
  }

  .lemon-card-add:hover {
    border-color: rgba(25, 83, 255, 0.3);
    background: rgba(25, 83, 255, 0.06);
    transition: all 0.3s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-icon {
    opacity: 0;
    transition: all 0.2s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-icon-hover {
    opacity: 1;
    transition: all 0.5s ease-in-out;
  }

  .lemon-card-add:hover .lemon-card-add-text {
    color: rgba(25, 83, 255, 1);
    transition: all 0.3s ease-in-out;
  }

  .lemon-card-add-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 1;
  }

  .lemon-card-add-icon-hover {
    position: absolute;
    width: 80px;
    height: 80px;
    opacity: 0;
  }

  .lemon-card-add-text {
    padding-top: 5px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.35);
  }
</style>
